5
5
.
.
1
1
5
5
.
.
o
o
f
f
f
f
s
s
e
e
t
t
I
I
n
n
f
f
o
o
[
[
R
R
]
]
.offset modifier moves View from its default position.
You can use .padding to increase the area for the same amount so that moved View doesn't overlap its neighbor.
Inside ZStack .offset lets you control how Views should overlap as sown in ZStack Example.
Syntax
.offset(x: 20, y: -20) //CGFloat
.offset(x: 20)
.offset(y: 20)
E
E
x
x
a
a
m
m
p
p
l
l
e
e
Example
struct ContentView: View {
var body: some View {
VStack {
Text("Home")
Text("Options").border(Color.red, width: 2)
.offset(x: 20, y: 15)
.padding(.bottom, 15)
Text("Help")
}
}
}
Output with only offset Output with offset & padding which prevents overlapping
Z
Z
S
S
t
t
a
a
c
c
k
k
E
E
x
x
a
a
m
m
p
p
l
l
e
e
Inside ZStack .offset lets you control how Views should overlap.
In this example we use .offset to move Author's name from the bottomTrailing corner.
ContentView.swift
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomTrailing) {
Image("Person").resizable().aspectRatio(contentMode: .fit)
Text("Photo: By John")
.border(Color.red, width: 2)
.padding(4)
.background(Color.blue)
.foregroundColor(.white)
.offset(x: -30, y: -10) //From bottomTrailing corner
}
}
}
Output
